<template>
<div class="el-scrollbar__wrap wrap-white padding-20">
  <div class="el-scrollbar__view">
  <el-tabs v-model="activeName" >
    <el-tab-pane label="默认查询年级" name="first">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>配置默认查询年级</h3>
        </div>
        <el-form size="small">
          <el-form-item>
             <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          </el-form-item>
          <el-form-item>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedGrades" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in allSelect" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
           <el-form-item>
           <el-button v-if="hasPermission('selectcontent:selectContent:add')" type="primary" size="small" @click="save()">确定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane>

    <el-tab-pane label="默认查询学籍状态">

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>配置默认查询学籍状态</h3>
        </div>
        <el-form size="small">
          <el-form-item>
             <el-checkbox :indeterminate="isIndetermina" v-model="checkA" @change="handleCheckAllChan">全选</el-checkbox>
          </el-form-item>
          <el-form-item>
           <div style="margin: 15px 0;"></div>
           <el-checkbox-group v-model="checkedstate" @change="handleCheckedCitiesChan">
             <el-checkbox v-for="city in state" :label="city" :key="city">{{city}}</el-checkbox>
           </el-checkbox-group>
          </el-form-item>
           <el-form-item>
           <el-button v-if="hasPermission('selectcontent:selectContent:add')" type="primary" size="small" @click="save()">确定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="关闭某年级账号">
      <!-- 默认取消在籍的学生 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>请通过选项来确定是否登录的年级</h3>
          <h5 style="font-weight: 500;">提示：只会修改学籍状态为“在籍”的学生</h5>
        </div>
        <el-form size="small">
          <el-form-item>
              <el-radio v-model="loginFlag" label="0">禁止登录</el-radio>
              <el-radio v-model="loginFlag" label="1">允许登录</el-radio>
             <!-- <el-checkbox :indeterminate="isIndetermina" v-model="checkA" @change="handleCheckAllChan">全选</el-checkbox> -->
          </el-form-item>
          <el-form-item>
           <div style="margin: 15px 0;"></div>
             <el-select v-model="gradeValue" placeholder="请选择">
               <el-option
                 v-for="item in gradeList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
             </el-select>
          </el-form-item>
           <el-form-item>
           <el-button type="primary" size="small" @click="cancelLogin()">确定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane>


    <el-tab-pane label="登录">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>单一登陆配置</h3>
        </div>
        <el-form size="small" ref="loginFormSetting" :model="loginFormSetting">
          <el-form-item>
             <el-checkbox true-label="1" false-label="0" v-model="loginFormSetting.multiAccountLogin">单一登录</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-radio-group v-model="loginFormSetting.singleLoginType">
              <el-radio :disabled="loginFormSetting.multiAccountLogin ==='0'" label="1">后登陆踢出先登录</el-radio>
              <el-radio :disabled="loginFormSetting.multiAccountLogin ==='0'" label="2">已登陆禁止再登陆</el-radio>
            </el-radio-group>
          </el-form-item>
           <el-form-item>
            <el-button size="small" type="primary" @click="doSubmit(loginFormSetting)">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="系统开启">
      <!-- 默认取消在籍的学生 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>可以通过一键关闭或定时关闭对学生进行登录限制</h3>
          <br />
          <h5>在该区间内学生不能访问</h5>
        </div>
        <el-form size="small">
          <el-form-item>
            关闭
            <el-switch
              v-model="systemSwitch.oneClickClose"
              style="margin: 2px;"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
            开启
             <!-- <el-checkbox :indeterminate="isIndetermina" v-model="checkA" @change="handleCheckAllChan">全选</el-checkbox> -->
          </el-form-item>
          <el-form-item>
           <div style="margin: 15px 0;"></div>
          <div class="block" style="width: 220px; margin: 0; padding: 0;">
            <el-date-picker
              v-model="systemSwitch.startClosingTime"
              type="datetime"
              placeholder="选择开始日期时间"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div class="block" style="width: 220px;  margin: 0; padding: 0;">
            <el-date-picker
              v-model="systemSwitch.endClosingTime"
              type="datetime"
              placeholder="选择结束日期时间"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <el-button type="primary" size="small" @click="clearSubmitSystemSwitch()" style="margin-left: 10px;">清空时间</el-button>
          </el-form-item>
           <el-form-item>
           <el-button type="primary" size="small" @click="submitSystemSwitch()">确定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane>
<!--    <el-tab-pane label="基础分数">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>配置学生基础分数</h3>
        </div>
        <el-form size="small" ref="loginFormSetting" :model="loginFormSetting">
          <el-form-item>
            <h3>在创建学生的过程中配置基础分数</h3>
          </el-form-item>
          <el-form-item>
            <el-input size="small" v-model="ds.defaultScore" placeholder="默认分数" style="width: 200px;" clearable></el-input>
          </el-form-item>
           <el-form-item>
            <el-button size="small" type="primary" @click="setDefaultScore()">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane> -->
<!--    <el-tab-pane label="外观" name="second">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>外观配置</h3>
        </div>
        <el-form size="small" label-width="150px" :model="themeFormSetting">
          <el-form-item label="产品标题">
            <el-input v-model="themeFormSetting.productName"></el-input>
          </el-form-item>
          <el-form-item label="产品logo">
            <el-upload
              class="avatar-uploader"
              :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=logo`"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
               :show-file-list="false">
              <img v-if="themeFormSetting.logo" :src="themeFormSetting.logo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="默认布局">
              <el-select v-model="themeFormSetting.defaultLayout" placeholder="请选择"  style="width: 100%;">
                <el-option
                  v-for="item in layouts"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="默认主题">
            <div class="tag-group" style="margin-top:7px">
              <el-tooltip effect="dark" :content="item.key" placement="top-start" v-for="(item, index) in colorList" :key="index">
                <el-tag :color="item.color" class="themeColorTag" @click="themeFormSetting.defaultTheme = item.color">
                  <i class="el-icon-check themeColorFont" v-if="item.color === themeFormSetting.defaultTheme"></i>
                </el-tag>
              </el-tooltip>
            </div>
          </el-form-item>
          <el-form-item label="首页地址">
              <el-input v-model="themeFormSetting.homeUrl"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="doSubmit(themeFormSetting)">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane> -->
<!--    <el-tab-pane label="短信" name="third">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>阿里大鱼短信配置(<a href="https://dayu.aliyun.com" target="_blank">官网</a>)</h3>
        </div>
        <el-form size="small" label-width="150px" :model="smsFormSetting">
          <el-form-item label="accessKeyId" :rules="[
                  {required: true, message:'必填项不能为空', trigger:'blur'}
                 ]">
            <el-input v-model="smsFormSetting.accessKeyId" placeholder="此处需要替换成开发者自己的AK(在阿里云访问控制台寻找)"></el-input>
          </el-form-item>
          <el-form-item label="accessKeySecret" :rules="[
                  {required: true, message:'必填项不能为空', trigger:'blur'}
                 ]">
            <el-input v-model="smsFormSetting.accessKeySecret" placeholder="此处需要替换成开发者自己的AK(在阿里云访问控制台寻找)"></el-input>
          </el-form-item>
          <el-form-item label="短信签名" :rules="[
                  {required: true, message:'必填项不能为空', trigger:'blur'}
                 ]">
            <el-input v-model="smsFormSetting.signature" placeholder="必填:短信签名-可在短信控制台中找到"></el-input>
          </el-form-item>
          <el-form-item label="短信模板" :rules="[
                  {required: true, message:'必填项不能为空', trigger:'blur'}
                 ]">
            <el-input v-model="smsFormSetting.templateCode" placeholder="必填:短信模板编号-可在短信控制台中找到"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="doSubmit(smsFormSetting)">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane> -->
<!--    <el-tab-pane label="邮箱" name="fourth">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>发件人账户</h3>
        </div>
         <el-form size="small" label-width="150px" :model="emailFormSetting">
          <el-form-item label="邮箱服务器地址" :rules="[
                  {required: true, message:'必填项不能为空', trigger:'blur'}
                 ]">
            <el-input v-model="emailFormSetting.smtp" placeholder="此处需要替换成开发者自己的AK(在阿里云访问控制台寻找)"></el-input>
          </el-form-item>
          <el-form-item label="邮箱服务器端口" :rules="[
                  {required: true, message:'必填项不能为空', trigger:'blur'}
                 ]">
            <el-input v-model="emailFormSetting.port" placeholder="此处需要替换成开发者自己的AK(在阿里云访问控制台寻找)"></el-input>
          </el-form-item>
          <el-form-item label="系统邮箱地址" :rules="[
                  {required: true, message:'必填项不能为空', trigger:'blur'}
                 ]">
            <el-input v-model="emailFormSetting.mailName" placeholder="必填:短信签名-可在短信控制台中找到"></el-input>
          </el-form-item>
          <el-form-item label="系统邮箱密码" :rules="[
                  {required: true, message:'必填项不能为空', trigger:'blur'}
                 ]">
            <el-input v-model="emailFormSetting.mailPassword" placeholder="必填:短信模板编号-可在短信控制台中找到"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="doSubmit(emailFormSetting)">保存</el-button>
          </el-form-item>
        </el-form>

      </el-card>
    </el-tab-pane> -->
  </el-tabs>
  </div>
</div>
</template>
<script>
  export default {
    data () {
      return {
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: '',
        systemSwitch: {
          oneClickClose: '',
          startClosingTime: '',
          endClosingTime: '',
          id: ''
        },
        ds: {
          defaultScore: ''
        },
        dataListSelections: [],
        isImportCollapse: false,
        loading: false,
        checkAll: false, // 全选
        checkA: false, // 状态全选
        checkedGrades: [], // 已选中的
        allSelect: [], // 可选项, 采用的是计算机学院的年级
        isIndeterminate: true,
        isIndetermina: true,
        gradeList: [], // 年级list
        gradeValue: '',
        loginFlag: '',
        id: '',
        state: ['在籍', '休学', '保留学籍'],
        checkedstate: [], // 选择的状态
        activeName: 'first',
        loginFormSetting: {
          multiAccountLogin: '0',
          singleLoginType: '1'
        },
        themeFormSetting: {
          defaultTheme: '#1890FF',
          productName: '',
          logo: '',
          defaultLayout: '',
          homeUrl: ''
        },
        smsFormSetting: {
          accessKeyId: '',
          accessKeySecret: '',
          signature: '',
          templateCode: ''
        },
        emailFormSetting: {
          smtp: '',
          port: '',
          mailName: '',
          mailPassword: ''
        },
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        colorList: [
          {
            key: '拂晓蓝（默认）', color: '#1890FF'
          },
          {
            key: '薄暮', color: '#F5222D', label: '1'
          },
          {
            key: '火山', color: '#FA541C', label: '2'
          },
          {
            key: '日暮', color: '#FAAD14'
          },
          {
            key: '明青', color: '#13C2C2'
          },
          {
            key: '极光绿', color: '#52C41A'
          },
          {
            key: '极客蓝', color: '#2F54EB'
          },
          {
            key: '酱紫', color: '#722ED1'
          },
          {
            key: '天空蓝', color: '#3e8df7'
          },
          {
            key: '咖啡色', color: '#9a7b71'
          },
          {
            key: '深湖蓝', color: '#07b2d3'
          },
          {
            key: '原谅绿', color: '#0cc26c'
          },
          {
            key: '古铜灰', color: '#757575'
          },
          {
            key: '珊瑚紫', color: '#6779fa'
          },
          {
            key: '橙黄', color: '#eb6607'
          },
          {
            key: '粉红', color: '#f74584'
          },
          {
            key: '青紫', color: '#9463f7'
          },
          {
            key: '橄榄绿', color: '#16b2a3'
          }
        ],
        layouts: [
          {label: '横向菜单', value: 'top'},
          {label: '左侧菜单', value: 'left'}
        ]
      }
    },
    activated () {
      this.getGrade()
      this.refreshList()
      this.queryGrage()
      this.querySystemSwitch()
      // this.queryDefaultScore()
      this.$http.get('/sys/sysConfig/queryById').then(({data}) => {
        this.loginFormSetting = this.recover(this.loginFormSetting, data.config)
        this.themeFormSetting = this.recover(this.themeFormSetting, data.config)
        this.smsFormSetting = this.recover(this.smsFormSetting, data.config)
        this.emailFormSetting = this.recover(this.emailFormSetting, data.config)
      })
    },
    methods: {
      clearSubmitSystemSwitch () {
        this.systemSwitch.endClosingTime = ''
        this.systemSwitch.startClosingTime = ''
      },
      queryDefaultScore () {
        this.$http({
          url: '/defaultscore/defaultScore/list',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.ds.defaultScore = data.page.list[0].defaultScore
          }
        })
      },
      setDefaultScore () {
        this.$http({
          url: '/defaultscore/defaultScore/setting',
          method: 'post',
          params: {
            ...this.ds
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.$message.success(data.msg)
          }
        })
      },
      handleAvatarSuccess (res, file) {
        this.themeFormSetting.logo = res.url
      },
      querySystemSwitch () {
        this.$http({
          url: '/systemswitch/systemSwitch/list',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.systemSwitch.startClosingTime = data.page.list[0].startClosingTime
            this.systemSwitch.endClosingTime = data.page.list[0].endClosingTime
            this.systemSwitch.oneClickClose = data.page.list[0].oneClickClose
            // 如果是1就是true，允许学生登录
            if (this.systemSwitch.oneClickClose === 1) {
              this.systemSwitch.oneClickClose = true
            } else {
              this.systemSwitch.oneClickClose = false
            }
          }
        })
      },
      submitSystemSwitch () {
        if (this.systemSwitch.oneClickClose === true) {
          this.systemSwitch.oneClickClose = 1
        } else {
          this.systemSwitch.oneClickClose = 0
        }
        this.$http({
          url: '/systemswitch/systemSwitch/setting',
          method: 'post',
          params: {
            ...this.systemSwitch
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.$message.success(data.msg)
          }
        })
      },
      // 获取年级
      getGrade () {
        this.$http({
          url: '/sys/office/treeData',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            let le = data.treeData[0].children[5].children.length
            this.allSelect = []
            for (let num = 0; num < le; num++) {
              this.allSelect.push(data.treeData[0].children[5].children[num].name)
            }
          }
        })
      },
      cancelLogin () {
        if (this.loginFlag.length > 0 && this.gradeValue.length > 0) {
          this.loading = true
          this.$http({
            url: '/sys/user/updateLoginByGrade',
            method: 'post',
            params: {
              grade: this.gradeValue,
              loginFlag: this.loginFlag
            }
          }).then(({data}) => {
            if (data && data.success) {
              this.loading = false
              this.$message.success(data.msg)
              this.gradeList = data.list
            }
          })
        } else {
          this.$message.warning('请把所有选项都选中再提交')
        }
      },
      queryGrage () {
        this.$http({
          url: '/graph/Graph/getGrade',
          method: 'post'
        }).then(({data}) => {
          if (data && data.success) {
            this.gradeList = data.list
          }
        })
      },
      save () {
        this.loading = true
        this.$http({
          url: '/selectcontent/selectContent/delete',
          method: 'delete',
          params: {'ids': this.id}
        }).then(({data}) => {
          if (data && data.success) {
            this.$message.success(data.msg)
            this.refreshList()
          }
        })
        this.$http({
          url: `/selectcontent/selectContent/save`,
          method: 'post',
          params: {
            'selectGrage': this.checkedGrades.toString(),
            'selectState': this.checkedstate.toString()
          }
        }).then(({data}) => {
          this.loading = false
          if (data && data.success) {
            this.visible = false
            this.$message.success(data.msg)
            this.$emit('refreshDataList')
          }
        })
      },
      // 获取数据列表
      refreshList () {
        this.loading = true
        this.$http({
          url: '/selectcontent/selectContent/list',
          method: 'get',
          params: {
            'pageNo': this.pageNo,
            'pageSize': this.pageSize,
            'orderBy': this.orderBy,
            ...this.searchForm
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.checkedGrades = data.page.list[0].selectGrage.split(',')
            this.checkedstate = data.page.list[0].selectState.split(',')
            this.id = data.page.list[0].id
            this.dataList = data.page.list
            this.total = data.page.count
            this.loading = false
          }
        })
      },
      handleCheckAllChange (val) {
        this.checkedGrades = val ? this.allSelect : []
        this.isIndeterminate = false
      },
      handleCheckedCitiesChange (value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.allSelect.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allSelect.length
      },
      handleCheckAllChan (val) {
        this.checkedState = val ? this.state : []
        this.isIndetermina = false
      },
      handleCheckedCitiesChan (value) {
        let checkedCount = value.length
        this.checkA = checkedCount === this.state.length
        this.isIndetermina = checkedCount > 0 && checkedCount < this.state.length
      },
      beforeAvatarUpload (file) {
        const isJPG = file.type.indexOf('image/') >= 0
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传LOGO只能是图片格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传LOGO大小不能超过 2MB!')
          return false
        }
        return true
      },
      doSubmit (form) {
        this.$http.post('/sys/sysConfig/save', form).then(({data}) => {
          if (data.success) {
            this.$message.success(data.msg)
            localStorage.setItem('defaultLayout', data.config.defaultLayout)
            localStorage.setItem('defaultTheme', data.config.defaultTheme)
            this.$events.$emit('updateTheme', data.config.defaultTheme)
            this.$store.commit('config/updateConfig', data.config)
          }
        })
      }
    }
  }
</script>
<style>
.themeColorTag{
  width:25px !important;
  height:25px !important;
}
 .themeColorTag.el-tag + .el-tag {
    margin-left: 5px;
    margin-bottom: 0px;
}
.themeColorFont{
  position: absolute;
  color: #fff;
  margin-top: 3px;
  margin-left: -6px;
  font-weight: bold;
  font-size: 16px;
}
</style>
